@auto: 0 auto;

  .px (@px, @attr: width) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .fs (@px, @attr: font-size) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  // .top_title {
  //   width: 100vw;

  //   audio {
  //     width: 10vw;
  //     height: 10vw;
  //   }

  // }
  .top_title {
    width: 100vw;
    overflow: hidden;
    background: #06006B;
    .header {
        width: 100vw;
        .px(866, height);
        background: url("@/assets/images/good_voice/voice_bg.png") no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        position: relative;
    
        >img:nth-of-type(1) {
          .px(786);
          .px(544, height);
          .px(70, margin-top)
        }
    
        >img:nth-of-type(2) {
          .px(226);
          .px(88, height);
          position: absolute;
          .px(24, top);
          .px(8, right)
        }
      }
  }


  .invitation_gift {
    width: 100vw;
    .px(-60, margin-top);
    position: relative;

    .singer_gift {
      .px(776);
      margin: @auto;
      .px(370, height);
      .px(156, margin-bottom);
      background: url("@/assets/images/good_voice/voice_gift_bg.png") no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;

      .gift_icon {
        .px(188);
        .px(274, height);
        .px(54, margin-left);
        display: flex;
        flex-direction: column;

        >div {
          .px(188);
          .px(196, height);
          background: url("@/assets/images/good_voice/list_person_frame.png") no-repeat;
          background-size: cover;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 88%;
          }
        }

        >img {
          .px(184);
          .px(18, margin-top)
        }
      }

      .gift_center {
        .px(432);
        .px(38, margin-left);

        img {
          width: 100%;
        }
      }
    }

    .receive {
      .px(828);
      .px(368, height);
      background: url("@/assets/images/good_voice/voice_receive_bg.png") no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .px(142, margin-bottom);

      >img {
        .px(188);
        .px(-54, margin-top);
      }

      .text_rule {
        display: flex;
        flex-direction: column;
        .fs(30);
        .px(50, line-height);
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFEFFF;
        .px(34, margin-left);
        .px(-54, margin-top);

        >span:nth-of-type(2) {
          color: #FDFB48;
        }
      }

      .click_receive {
        position: absolute;
        .px(406);
        .px(-20, bottom);

        >img {
          width: 100%;
        }
      }
    }

    .Jackpot {
      .px(768);
      .px(746, height);
      background: #34029F;
      border: 2px solid #FFFFFF;
      .px(20, border-radius);
      margin: @auto;
      .px(34, margin-bottom);
      position: relative;
      box-shadow: 3px 3px 3px #173fe5, -3px -3px 3px #173fe5;

      .top_jackpot {
        position: relative;
        z-index: 2;
        display: flex;
        .px(146, height);
        width: 100%;
        align-items: center;
        justify-content: center;
        .px(-76, margin-top);

        >img:nth-of-type(1) {
          position: absolute;
          left: -3%;
          top: 0%;
          .px(152);
          z-index: 2;
        }

        >img:nth-of-type(2) {
          position: absolute;
          right: -3%;
          top: 0%;
          .px(146);
        }

        >img:nth-of-type(3) {
          position: absolute;
          left: -3%;
          top: 0%;
          .px(146);
        }

        .Cumulative {
          .px(580);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          >img:nth-of-type(1) {
            position: absolute;
            left: 0%;
            .px(130);
          }

          >img:nth-of-type(2) {
            .px(130);
            position: absolute;
            right: 0%;
          }

          >div {
            .px(410);
            .px(120, height);
            background: url("@/assets/images/good_voice/voice_jackpo_title.png") no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            >img {
              width: fit-content;
              .px(258)
            }
          }


        }
      }

      .voice_decorate_img {
        position: absolute;
        .px(760);
        .px(30, top);
      }

      .Cumulative_ {
        display: flex;
        flex-direction: column;
        .px(600);
        justify-content: center;
        position: relative;
        margin: @auto;
        .px(40, margin-top);

        .Diamonds {
          width: 100%;
          .px(74, height);
          display: flex;
          justify-content: center;
          align-items: center;

          >img {
            .px(76);
            .px(30, margin-right);
          }

          >span {
            background: linear-gradient(0deg, #F8E596 0.68359375%, #FA8A0A 99.5849609375%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-family: PingFang SC;
            font-weight: 600;
            .fs(80);
            color: #FEFEFE;
          }
        }

        .box_gift {
          .px(584);
          .px(10, margin-top);
        }
      }

      .match_rewards {
        .px(584);
        .px(88, height);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .px(56, margin-top);

        >div {
          .px(226);
          .px(88, height);
          background: url("@/assets/images/good_voice/jackpo_reward_btn.png") no-repeat;
          background-size: cover;
          display: flex;
          font-family: Adobe Heiti Std;
          font-weight: bold;
          font-style: italic;
          color: #FFFFFF;
          justify-content: center;
          .px(96, line-height);
          .fs(30);

          span {
            .px(26, padding-right);
          }
        }
      }
    }

    .distinguished {
      .px(384, height);
      .px(120, margin-bottom);
      display: flex;
      flex-direction: column;

      .voice_decorate_img {
        position: absolute;
        top: 0%;
      }

      .box_jiabin {
        width: 98%;
        flex: 1;
        margin: @auto;
        display: flex;
        align-items: center;
        overflow-x: scroll;

        .list_dan {
          .px(244);
          .px(230, height);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          flex-shrink: 0;
          .px(10, margin-left);
          .px(10, margin-right);

          .header_image {
            width: 100%;
            .px(184, height);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;

            >img:nth-of-type(1) {
              .px(244);
              position: absolute;
              z-index: 2;
            }

            >img:nth-of-type(2) {
              .px(166);
              .px(166, height);
              border-radius: 50%;
              position: absolute;
              z-index: 1;
            }
          }

          >span {
            font-family: PingFang SC;
            font-weight: 400;
            color: #FEFEFE;
            .fs(30);
          }
        }
      }

      .box_jiabin1,
      .box_jiabin2 {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .box_jiabin3,
      .box_jiabin4 {
        display: flex;
        align-items: center;
        // justify-content: center;

        .list_dan {
          .px(230);
          .px(230, height);

          .header_image {
            width: 100%;
            .px(180, height);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;

            >img:nth-of-type(1) {
              width: 100%;
              position: absolute;
              z-index: 2;
            }
          }
        }
      }
    }

    .AuditionTime {
      width: 100vw;
      .px(204, height);
      position: relative;
      background: url("@/assets/images/good_voice/match_frame.png") no-repeat;
      background-size: cover;
      .px(116, margin-bottom);

      .SelectionStage {
        width: 88vw;
        .px(144, height);
        margin: @auto;
        position: absolute;
        .px(-96, top);
        left: 6vw;
        display: flex;
        justify-content: center;

        >div {
          flex-shrink: 0;
          .px(153);
          .px(144, height);
          background: url("@/assets/images/good_voice/match_yusai_nor.png") no-repeat;
          background-size: contain;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          position: relative;

          >img {
            .px(30, height);
            opacity: 0.5;
          }

          >div {
            position: absolute;
            width: 100%;
            .px(40, height);
            text-align: center;
            font-family: PingFang SC;
            font-weight: 400;
            .fs(18);
            color: #FFFFFF50;
            transform: scale(0.65);
            .px(40, line-height);
          }

          span {
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF50;
            .fs(26);
          }
        }

        >div:first-child {
          background: url("@/assets/images/good_voice/haixuan_nor_btn.png") no-repeat;
          background-size: contain;
        }

        >div:last-child {
          background: url("@/assets/images/good_voice/match_zongjuesai_frame.png") no-repeat;
          background-size: contain;

          >div {
            .px(6, left);
          }
        }

        >.bg_cur1 {
          flex-shrink: 0;
          .px(153);
          .px(144, height);
          background: url("@/assets/images/good_voice/haixuan_select_btn.png") no-repeat !important;
          background-size: contain !important;

          .time_some {
            width: 100%;
            text-align: center;
            color: #FFFFFF !important;
          }

          span {
            color: #FFFFFF !important;
          }

          >img {
            opacity: 1;
          }
        }

        >.bg_cur2,
        .bg_cur3,
        .bg_cur4 {
          flex-shrink: 0;
          .px(153);
          .px(144, height);
          background: url("@/assets/images/good_voice/yusai_select_btn.png") no-repeat !important;
          background-size: contain !important;

          .time_some {
            width: 100%;
            text-align: center;
            color: #FFFFFF !important;
          }

          span {
            color: #FFFFFF !important;
          }

          >img {
            opacity: 1;
          }
        }

        >.bg_cur5 {
          flex-shrink: 0;
          .px(153);
          .px(144, height);
          background: url("@/assets/images/good_voice/zongjuesai_select_btn.png") no-repeat !important;
          background-size: contain !important;

          .time_some {
            width: 100%;
            text-align: center;
            color: #FFFFFF !important;
          }

          span {
            color: #FFFFFF !important;
          }

          >img {
            opacity: 1;
          }
        }
      }

      .countDown {
        width: 88%;
        position: absolute;
        .px(30, bottom);
        left: 6%;
        .px(40, height);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;

        color: #FFF9EA;
        .fs(32);
        .px(40, margin-top);

        .van-count-down {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #FFF9EA;
          font-family: PingFang SC;
          font-weight: 400;

          .item {
            border: 1px solid #E4BEFD;
            background: #4B0188;
            .px(10, border-radius);
            .px(6, margin-left);
            .px(6, margin-right);
            .px(54);
            .px(50, height);
            .px(54, line-height);
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
          }
        }
      }
    }

    .rank_list {
      .px(768);
      background: #34029F;
      border: 2px solid #FFFFFF;
      .px(20, border-radius);
      margin: @auto;
      .px(123, margin-bottom);
      position: relative;
      box-shadow: 3px 3px 3px #173fe5, -3px -3px 3px #173fe5;

      .top_jackpot {
        position: relative;
        z-index: 2;
        display: flex;
        .px(146, height);
        width: 100%;
        align-items: center;
        justify-content: center;
        .px(-76, margin-top);

        >img:nth-of-type(1) {
          position: absolute;
          left: -3%;
          top: 0%;
          .px(152);
        }

        >img:nth-of-type(2) {
          position: absolute;
          right: -3%;
          top: 0%;
          .px(146);
        }

        .Cumulative {
          .px(580);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          >img:nth-of-type(1) {
            position: absolute;
            left: 0%;
            .px(130);
          }

          >img:nth-of-type(2) {
            .px(130);
            position: absolute;
            right: 0%;
          }

          >div {
            .px(410);
            .px(120, height);
            background: url("@/assets/images/good_voice/voice_jackpo_title.png") no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            >img {
              width: auto;
              .px(52, height);
            }
          }
        }
      }

      .voice_decorate_img {
        position: absolute;
        .px(760);
        .px(30, top);
      }

      .seach_ {
        width: 98%;
        .px(82, height);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: @auto;
        .px(34, margin-top);
        .px(48, margin-bottom);
        position: relative;

        .ipt_btn {
          // .px(552);
          .px(80, height);
          .px(40, border-radius);
          border: 1px solid #7131FB;
          background: #34029F;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .fs(26);
          color: #FFFFFF;
          .px(16, margin-right);

          >input {
            .px(394);
            flex: 1;
            .px(80, height);
            display: flex;
            align-items: center;
            flex-shrink: 0;
            border: 0;
            background: 00000000;
            .px(16, margin-left)
          }

          ::-webkit-input-placeholder {
            font-family: PingFang SC;
            font-weight: 400;
            color: #017FB9;
            .fs(26);
          }

          >.sousuo {
            flex-shrink: 0;
            .px(148);
            .px(80, height);
            background: linear-gradient(82deg, #031EC4 0%, #0BDAFF 99%);
            border: 1px solid #7131FB;
            border-radius: 40px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FEFEFE;
            .fs(30);
            text-align: center;
            .px(80, line-height);
          }
        }
      }

      .stage_ {
        .px(168);
        .px(80, height);
        border: 1px solid #9F7AFC;
        background: linear-gradient(82deg, #0190FF 1%, #BF0FF9 99%);
        border-radius: 40px;
        position: relative;

        .flei_ {
          width: 100%;
          height: 100%;
          .fs(30);
          font-family: PingFang SC;
          font-weight: 500;
          color: #FEFEFE;
          display: flex;
          align-items: center;
          justify-content: center;



          img {
            .px(42);
          }
        }
      }

      .rank_box_nth2 {
        width: 98%;
        margin: @auto;
        display: flex;
        position: relative;

        .rank_32_box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          width: 100%;
          .px(2434, max-height);
          .px(700, min-height);
          overflow-y: scroll;

          .single_box_32 {
            .px(728);
            .px(220, height);
            .px(10, border-radius);
            .px(24, margin-bottom);
            background: linear-gradient(177deg, #6EF3FF, #F61FCD, #F61FCD, #6EF3FF);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            .center_32 {
              .px(724);
              .px(216, height);
              .px(10, border-radius);
              background: #130B3F;
              display: flex;
              align-items: center;

              .header_image_box32 {
                .px(188);
                .px(196, height);
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                .px(20, margin-left);
                .px(28, margin-right);

                >img:nth-of-type(1) {
                  width: 100%;
                  position: absolute;
                }

                >img:nth-of-type(2) {
                  .px(142);
                  .px(142, height);
                  border-radius: 50%;
                  position: absolute;
                }
              }

              .name_wenben_box {
                flex: 1;
                display: flex;
                flex-direction: column;

                >span {
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #FFFFFF;
                  .fs(30);
                  .px(10, padding-left);
                }

                .voice_mp3 {
                  .px(284);
                  .px(46, height);
                  display: flex;
                  align-items: center;
                  .px(20, margin-top);
                  .px(22, margin-bottom);

                  >img {
                    .px(64);
                    z-index: 2;
                  }

                  >div {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    .px(46, height);
                    background: linear-gradient(74deg, rgba(65, 83, 252, 0.99) 1%, rgba(73, 81, 248, 0) 100%);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    .fs(24);
                    .px(-24, margin-left);
                    .px(10, padding-left);
                    flex-wrap: nowrap;

                    :deep(.van-notice-bar) {
                      padding: 0;
                      width: 100%;
                      height: 100%;
                      background: 00000000;
                      transform: scale(0.8);
                      .fs(24);
                      color: #fff;
                    }


                    // span {
                    //   display: inline-block;
                    //   transform: scale(0.8);
                    //   white-space: nowrap;
                    // }
                  }

                }

                .Help_voice {
                  .px(188);
                  .px(40, height);
                  display: flex;
                  align-items: center;
                  // justify-content: center;

                  >div {
                    .px(70);
                    .px(48, height);
                    .px(10, border-radius);
                    border: 1px solid #0BCCFB;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #0BCCFB;
                    .fs(24);
                    text-align: center;
                    .px(48, line-height);
                    transform: scale(0.8)
                  }

                  span {
                    .fs(28);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #71E0FB;
                    .px(10, padding-left);
                  }
                }
              }

              .btn_vote {
                .px(154);
                .px(54, height);
                .px(20, margin-right);
                background: linear-gradient(2deg, #DF00FF, #4C54E7, #39DDF8);
                box-shadow: 0px 1px 1px 0px #4CFBFA;
                .px(28, border-radius);
                .fs(28);
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-shadow: 0px 1px 0px rgba(55, 5, 162, 0.4);
                .px(54, line-height);
                text-align: center;
              }

              .btn_vote2 {
                background: linear-gradient(2deg, #797979, #797979, #797979);
                box-shadow: 0px 1px 1px 0px #797979;
              }
            }

            .rank_def {
              position: absolute;
              .px(0, top);
              .px(2, left);
              width: 100%;
              .px(36, height);
              display: flex;
              align-items: center;
              justify-content: space-between;

              >div {
                background: linear-gradient(0deg, #2985FF 0%, #B912F8 100%);
                border-radius: 4px 0px 10px 0px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                .fs(28);
                padding: 1px 8px;
                position: absolute;
                .px(2, top);
                .px(1, left);
              }

              span {
                .fs(28);
                font-family: PingFang SC;
                font-weight: 500;
                color: #F9ECB1;
                .px(20, padding-right);
                position: absolute;
                .px(10, top);
                .px(10, right);
              }
            }
          }
        }
      }

      .rank_box_nth3 {
        width: 98%;
        margin: @auto;
        display: flex;
        position: relative;
        display: flex;
        flex-direction: column;
        .px(700, min-height);


        .rank3_of_type {
          .px(718);
          .px(768, height);
          .px(60, margin-bottom);
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          >img {
            width: 100%;
            height: 100%;
            position: absolute;
          }

          .center_list_nor {
            width: 92%;
            margin: @auto;
            display: flex;
            justify-content: center;
            z-index: 2;
            .px(40, margin-bottom);
            .px(48, margin-left);

            >div {
              .px(18, margin-left);
              .px(18, margin-right);
            }



            .img_back {
              .px(310);
              .px(418, height);
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;

              >img:nth-of-type(1) {
                .px(310);
                position: absolute;
              }

              >div {
                .px(266);
                .px(366, height);
                border: 1px solid #FDE06E;
                z-index: 2;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;

                >img {
                  width: 100%;
                  // height: 100%;
                }
              }

            }

            .infor_list {
              display: flex;
              flex-direction: column;
              // align-items: center;

              >span:nth-of-type(1) {
                font-family: PingFang SC;
                font-weight: 500;
                color: #F9ECB1;
                .fs(60);
                text-align: center;
              }

              >span:nth-of-type(2) {
                font-family: PingFang SC;
                font-weight: 500;
                .fs(36);
                color: #FFFFFF;
                .px(22, padding-top);
                .px(24, padding-bottom);
                .px(10, padding-left);
              }

              .voice_mp3 {
                .px(284);
                .px(70, height);
                display: flex;
                align-items: center;
                overflow: hidden;
                .px(34, margin-bottom);


                >img {
                  .px(70);
                  z-index: 2;
                }

                >div {
                  display: flex;
                  align-items: center;
                  flex: 1;
                  .px(46, height);
                  background: linear-gradient(74deg, rgba(65, 83, 252, 0.99) 1%, rgba(73, 81, 248, 0) 100%);
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #FFFFFF;
                  .fs(30);
                  .px(-24, margin-left);
                  .px(10, padding-left);
                  flex-wrap: nowrap;

                   :deep(.van-notice-bar) {
                    padding: 0;
                    width: 100%;
                    height: 100%;
                    background: 00000000;
                    transform: scale(0.8);
                    color: #fff;
                  }

                  span {
                    display: inline-block;
                    transform: scale(0.8);
                    white-space: nowrap;
                  }
                }

              }

              .Help_voice {
                // .px(166);
                // .px(40, height);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: auto;
                // .px(10,margin-left);

                >div {
                  .px(78);
                  .px(48, height);
                  .px(10, border-radius);
                  border: 1px solid #0BCCFB;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #0BCCFB;
                  .fs(30);
                  text-align: center;
                  .px(48, line-height);
                  .px(26, margin-right);
                  // transform: scale(0.8)
                }

                span {
                  .fs(34);
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #71E0FB;
                  // .px(10, padding-left);
                }
              }

              .btn_vote {
                .px(220);
                .px(84, height);
                background: linear-gradient(2deg, #DF00FF, #4C54E7, #39DDF8);
                box-shadow: 0px 1px 1px 0px #4CFBFA;
                .px(68, border-radius);
                .fs(38);
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-shadow: 0px 1px 0px rgba(55, 5, 162, 0.4);
                .px(84, line-height);
                .px(30, margin-top);
                text-align: center;
              }

              .btn_vote2 {
                background: linear-gradient(2deg, #797979, #797979, #797979);
                box-shadow: 0px 1px 1px 0px #797979;
              }
            }
          }

          .center_list_nor2 {
            display: flex;
            flex-direction: row-reverse;
          }

          .text_list_ {
            width: 80%;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #FBF5DC;
            .fs(30);
            z-index: 2;
          }
        }
      }

      .rank_box {
        width: 98%;
        margin: @auto;
        display: flex;
        position: relative;

        .rank_100_box {
          display: flex;
          flex-wrap: wrap;
          // justify-content: space-around;
          width: 100%;
          .px(2300, max-height);
          .px(700, min-height);
          overflow: hidden;
          overflow-y: scroll;

          .single_box {
            .px(230);
            .px(558, height);
            .px(10, border-radius);
            .px(18, margin-bottom);
            .px(10, margin-right);
            .px(10, margin-left);
            background: linear-gradient(177deg, #6EF3FF, #F61FCD, #F61FCD, #6EF3FF);
            display: flex;
            align-items: center;
            justify-content: center;

            .center_box_tank {
              .px(226);
              .px(554, height);
              background: #130B3F;
              .px(10, border-radius);
              display: flex;
              flex-direction: column;
              align-items: center;

              .pm_pingf {
                width: 100%;
                .px(36, height);
                display: flex;
                justify-content: space-between;

                >div {
                  background: linear-gradient(0deg, #2985FF 0%, #B912F8 100%);
                  border-radius: 5px 0px 10px 0px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #FFFFFF;
                  .fs(28);
                  padding: 0px 8px;
                  // display: flex;
                  // align-items: center;
                  // justify-content: center;
                }

                span {
                  .fs(28);
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #F9ECB1;
                  .px(20, padding-right);
                }
              }

              .box_header_bg {
                .px(188);
                .px(196, height);
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                .px(40, margin-top);

                >img:nth-of-type(1) {
                  position: absolute;
                  .px(188);
                  z-index: 2;
                }

                >img:nth-of-type(2) {
                  position: absolute;
                  .px(142);
                  .px(142, height);
                  z-index: 1;
                  border-radius: 50%;
                }
              }

              .name_slice {
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                .fs(30);
                .px(10, padidng-top);
                .px(22, padidng-top);
              }

              .voice_mp3 {
                width: 88%;
                .px(64, height);
                display: flex;
                align-items: center;
                .px(14, margin-top);
                .px(22, margin-bottom);
                overflow: hidden;


                >img {
                  .px(64);
                  z-index: 2;
                }

                >div {
                  display: flex;
                  align-items: center;
                  flex: 1;
                  .px(46, height);
                  background: linear-gradient(74deg, rgba(65, 83, 252, 0.99) 1%, rgba(73, 81, 248, 0) 100%);
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #FFFFFF;
                  .fs(24);
                  .px(-20, margin-left);
                  .px(10, padding-left);
                  flex-wrap: nowrap;

                  :deep(.van-notice-bar) {
                    padding: 0;
                    width: 100%;
                    height: 100%;
                    background: 00000000;
                    transform: scale(0.8);
                    .fs(24);
                    color: #fff;
                  }

                  span {
                    display: inline-block;
                    transform: scale(0.8);
                    white-space: nowrap;
                  }
                }

              }

              .Help_voice {
                width: 78%;
                .px(40, height);
                display: flex;
                align-items: center;
                justify-content: center;

                >div {
                  .px(70);
                  .px(48, height);
                  .px(10, border-radius);
                  border: 1px solid #0BCCFB;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #0BCCFB;
                  .fs(24);
                  text-align: center;
                  .px(48, line-height);
                  transform: scale(0.8)
                }

                span {
                  .fs(28);
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #71E0FB;
                  .px(10, padding-left);
                }
              }

              .btn_vote {
                .px(154);
                .px(54, height);
                margin: @auto;
                .px(20, margin-top);
                background: linear-gradient(2deg, #DF00FF, #4C54E7, #39DDF8);
                box-shadow: 0px 1px 1px 0px #4CFBFA;
                .px(28, border-radius);
                .fs(28);
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-shadow: 0px 1px 0px rgba(55, 5, 162, 0.4);
                .px(54, line-height);
                text-align: center;
              }

              .btn_vote2 {
                background: linear-gradient(2deg, #797979, #797979, #797979);
                box-shadow: 0px 1px 1px 0px #797979;
              }
            }
          }

          .single_boxstep1 {
            .px(408, height);

            .center_box_tank {
              .px(404, height);
            }
          }
        }


      }
    }
  }

  .tab_ui {
    .px(160);
    .px(172, height);
    .px(10, border-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .active_xuanzhong {
      font-family: PingFang SC;
      font-weight: bold;
      color: #5433FE;
      .fs(30);
    }

    >div {
      width: 100%;
      height: 40%;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
      .fs(26);
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        .px(10, padding-left);
        .px(28)
      }

    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
  }

  .block {
    width: 100vw;
    display: flex;
    position: relative;

    .close {
      .px(56);
      .px(56, height);
      margin: @auto;
      display: flex;
      position: absolute;
      .px(68, right);
      .px(-150, top);
      z-index: 2;

      >img {
        margin-left: auto;
        .px(56);
      }
    }

    .center_rule {
      .px(688);
      margin: @auto;
      background: #34029F;
      border: 2px solid #FFFFFF;
      .px(20, border-radius);
      margin: @auto;
      position: relative;
      box-shadow: 3px 3px 3px #173fe5, -3px -3px 3px #173fe5;

      .top_jackpot {
        position: relative;
        z-index: 1;
        display: flex;
        .px(146, height);
        width: 100%;
        align-items: center;
        justify-content: center;
        .px(-76, margin-top);

        >img:nth-of-type(1) {
          position: absolute;
          left: -10%;
          top: 0%;
          .px(152);
        }

        >img:nth-of-type(2) {
          position: absolute;
          right: -10%;
          top: 0%;
          .px(146);
        }

        .Cumulative {
          .px(580);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          >img:nth-of-type(1) {
            position: absolute;
            left: 0%;
            .px(130);
          }

          >img:nth-of-type(2) {
            .px(130);
            position: absolute;
            right: 0%;
          }

          >div {
            .px(410);
            .px(120, height);
            background: url("@/assets/images/good_voice/voice_jackpo_title.png") no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;

            >img {
              .px(176)
            }
          }
        }
      }

      .voice_decorate_img {
        position: absolute;
        .px(688);
        top: 0%;
      }

      .center_rule_message {
        .px(600);
        margin: @auto;
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;


        .wenben_mss {
          .px(550);
          margin: @auto;
          display: flex;
          flex-direction: column;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .fs(30);
        }

        .image_erwm {
          .px(242);
          .px(242, height);
          .px(58, margin-top);
          .px(38, margin-bottom);

          >img {
            width: 100%;
          }
        }

        .contact_kefu {
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .fs(28);
        }

        .copy_kefu {
          display: flex;
          align-items: center;
          width: 100%;
          .fs(28);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .px(32, margin-top);
          .px(34, margin-bottom);
          justify-content: center;

          >img {
            .px(22);
            .px(20, padding-left);
          }
        }
      }

      .mode_type2 {
        .px(424, height);
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;

        >span {
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .fs(30);
          .px(50, line-height);
        }

        >span:first-child {
          .px(90, margin-top)
        }
      }

      .mode_type3 {
        width: 100%;
        .px(800, height);
        overflow-y: scroll;
        position: relative;
        z-index: 10;

        .rangk_01 {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .bg_rank {
            .px(232);
            .px(86, height);

            >img {
              width: 100%;
            }
          }

          .bg_rank2 {
            .px(378);
            .px(66, height);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;

            >img {
              position: absolute;
              width: 100%;
            }

            span {
              .fs(36);
              font-family: PingFang SC;
              font-weight: 500;
              color: #FBF5DC;
              z-index: 2;
            }
          }

          .gift_num_list {
            width: 100%;
            display: flex;
            justify-content: center;
            .px(60, margin-top);
            .px(44, margin-bottom);
            flex-wrap: wrap;
          }

          .list_num {
            .px(166);
            .px(250, height);
            display: flex;
            flex-direction: column;
            justify-content: center;
            .px(20, margin-left);
            .px(20, margin-right);


            .nor_gift {
              .px(166);
              .px(166, height);
              background: url("@/assets/images/good_voice/gift_frame.png") no-repeat;
              background-size: cover;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              flex-shrink: 0;


              >img {
                .px(88,height);
              }

              .xiand {
                .px(48);
                .px(48, height);
                position: absolute;
                .px(10, top);
                .px(10, right);
                border-radius: 50%;
                background: #FE69E6;
                text-align: center;
                .px(48, line-height);
                .fs(22);
                font-family: PingFang SC;
                font-weight: 400;
                color: #FBF5DC;
                transform: scale(0.8);
              }
            }

            .name_gift {
              .px(10, padding-top);
              width: 100%;
              flex: 1;
              font-family: PingFang SC;
              font-weight: 400;
              color: #FBF5DC;
              .fs(24);
              text-align: center;
              display: flex;
              flex-direction: column;
            }

          }

          .list_num2 {
            .px(1, margin-left);
            .px(1, margin-right);
          }
        }
      }

      .mode_type4 {
        width: 76%;
        .px(720, height);
        margin: @auto;
        .px(30, margin-top);
        display: flex;
        position: relative;
        overflow-y: scroll;

        .progress {
          .px(10);
          .px(770, height);
          background: #FBF5DC50;
          .px(5, border-radius);
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 10px;

          >div {
            .px(28);
            .px(28, height);
            background: #FBF5DC40;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            .px(96, margin-top);

            >div {
              .px(14);
              .px(14, height);
              border-radius: 50%;
              background: #FBF5DC;
            }
          }

          >div:nth-of-type(1) {
            .px(44, margin-top)
          }
        }

        .rule_text {
          display: flex;
          flex-direction: column;
          flex: 1;
          .px(40, margin-left);

          .cengci1 {
            .px(44, margin-top);
          }

          .cengci {
            display: flex;
            flex-direction: column;
            .px(30, margin-bottom);

            >img {
              .px(80);
              .px(30, height);
              .px(24, margin-bottom);
            }

            >span {
              font-family: PingFang SC;
              font-weight: 400;
              color: #FFFFFF;
              .fs(30);
            }

          }

          .cengci:nth-of-type(6) {
            >img {
              .px(150);
              .px(30, height);
              .px(24, margin-bottom);
            }
          }
        }
      }

      .mode_type5 {
        width: 76%;
        margin: @auto;
        .px(780, height);
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        position: relative;

        .rank_pangm {
          display: flex;
          flex-direction: column;
          align-items: center;
          .px(30, margin-top);
          .px(48, line-height);
          text-align: center;

          >img {
            width: auto;
            .px(30, height);
            .px(30, margin-bottom);
          }

          >span {
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            .fs(30);
          }
        }
      }
    }
  }

  .buy_ {
    .px(616);
    .px(526, height);
    background: #FDFEFE;
    .px(16, border-radius);
    position: relative;

    .close {
      .px(56);
      .px(56, height);
      margin: @auto;
      display: flex;
      position: absolute;
      .px(-20, right);
      .px(-120, top);
      z-index: 2;

      >img {
        margin-left: auto;
        .px(56);
      }
    }

    .center_modelo {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .heder_top {
        width: 100%;
        .px(146, height);
        text-align: center;
        .px(146, line-height);
        font-family: PingFang SC;
        font-weight: 500;
        color: #010101;
        .fs(34);
      }

      >span:nth-of-type(1) {
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        .fs(28);
        .px(32, padding-bottom);
      }

      .Stepper {
        width: 80%;
        .px(80, height);
        margin: @auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left_step {
          display: flex;
          align-items: center;

          .stepp {
            .px(80);
            .px(80, height);
            background: #476EFD;
            .px(10, border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            .fs(50);
            font-weight: 400;
          }

          .ipt_a {
            .px(160);
            .px(80, height);
            background: #476EFD12;
            .px(10, border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            .px(14, margin-left);
            .px(14, margin-right);

            >input {
              width: 88%;
              height: 80%;
              font-family: PingFang SC;
              font-weight: 500;
              color: #666666;
              .fs(30);
              border: 0;
              background: 00000000;
              text-align: center;
            }
          }
        }

        .right_all {
          .px(128);
          .px(80, height);
          .px(10, border-radius);
          background: #476EFD;
          text-align: center;
          .px(80, line-height);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .fs(28);
        }

      }

      .spend_zuans {
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        .fs(28);
        .px(32, padding-top);

        >span {
          color: #476EFD
        }
      }

      .surplus_ {
        position: absolute;
        .px(20, bottom);
        width: 88%;
        margin: @auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .syu_zuans {
          display: flex;
          .px(80, height);
          align-items: center;

          >div:nth-of-type(1) {
            .px(138);
            .px(60, height);
            text-align: center;
            .px(60, line-height);
            font-family: PingFang SC;
            font-weight: 400;
            color: #0336F0;
            .fs(24);
            background: #C7DCFC;
            .px(10, border-radius);
            transform: scale(0.8);
          }

          >span {
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            .fs(28);
            .px(10, padding-right);
          }

          >div:nth-of-type(2) {
            .px(46);
            .px(46, height);
            text-align: center;
            font-family: PingFang SC;
            font-weight: 400;
            color: #fff;
            .fs(40);
            background: #C186FA;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        .quer_ipt {
          .px(198);
          .px(78, height);
          background: linear-gradient(2deg, #DF00FF, #4C54E7, #39DDF8);
          -webkit-box-shadow: 0px 1px 1px 0px #4cfbfa;
          box-shadow: 0px 1px 1px 0px #4cfbfa;
          border-radius: 8.21vw;
          font-size: 4.59vw;
          font-family: PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          text-shadow: 0px 1px 0px rgb(55 5 162 / 40%);
          text-align: center;
          .px(78, line-height);
        }
      }
    }
  }

  .vote_toppiao {
    .px(616);
    .px(526, height);
    background: #FDFEFE;
    .px(16, border-radius);
    position: relative;

    .close {
      .px(56);
      .px(56, height);
      margin: @auto;
      display: flex;
      position: absolute;
      .px(-20, right);
      .px(-120, top);
      z-index: 2;

      >img {
        margin-left: auto;
        .px(56);
      }
    }

    .center_vote {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .heder_top {
        width: 100%;
        .px(160, height);
        text-align: center;
        .px(160, line-height);
        font-family: PingFang SC;
        font-weight: 400;
        color: #010101;
        .fs(30);
      }

      .ipt_num {
        width: 88%;
        margin: @auto;
        .px(80, height);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .ipt_ba {
          .px(390);
          .px(80, height);
          background: #476EFD12;
          .px(10, border-radius);
          display: flex;
          align-items: center;
          justify-content: center;

          input {
            width: 90%;
            height: 80%;
            border: 0;
            background: 00000000;
            .fs(28);
          }

          ::-webkit-input-placeholder {
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            .fs(28);
          }

        }

        .btn_all {
          .px(128);
          .px(80, height);
          background: #476EFD;
          .px(10, border-radius);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          .fs(28);
          text-align: center;
          .px(80, line-height);
        }
      }

      .all_surplus {
        width: 88%;
        margin: @auto;
        .px(48, margin-top);
        display: flex;
        justify-content: space-between;

        >span {
          .fs(28);
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
        }

        >div {
          .fs(28);
          font-family: PingFang SC;
          font-weight: 400;
          color: #476EFD;
        }
      }

      .btn_determine {
        .px(240);
        .px(88, height);
        margin: @auto;
        .px(70, margin-top);
        background: url("@/assets/images/good_voice/list_vote_btn.png") no-repeat;
        background-size: cover;
        text-align: center;
        .px(88, line-height);
        .fs(34);
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-shadow: 0px 3px 0px rgba(55, 5, 162, 0.4);
      }
    }

  }

  .not_list {
    .px(700, height);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FDFDFD;
    .fs(26);
  }

    :deep(.van-popup) {
    overflow: initial;
    background: 00000000;
  }